<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求列表 - 筛选查询 | SocialHub</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #eef0ff;
            --primary-dark: #3a0ca3;
            --secondary: #f72585;
            --accent: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --success: #4cc9f0;
            --warning: #f72585;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f5f7ff;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            padding: 0.75rem 1rem;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-container {
            max-width: 600px;
            width: 100%;
        }
        
        .main-container {
            padding: 2rem 0;
        }
        
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--primary-dark);
        }
        
        .filter-section {
            background-color: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .filter-toggle {
            display: none;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            width: 100%;
            text-align: left;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.1rem;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-group {
            margin-bottom: 1.5rem;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: var(--dark);
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }
        
        .filter-option {
            background-color: var(--light);
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 0.35rem 1rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-option:hover {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .filter-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .price-range {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .price-input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
        }
        
        .price-input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .date-range {
            display: flex;
            gap: 1rem;
        }
        
        .date-input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
        }
        
        .date-input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .filter-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .btn-filter {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.65rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            flex: 1;
            transition: background-color 0.2s;
        }
        
        .btn-filter:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-reset {
            background-color: white;
            color: var(--gray);
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 0.65rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            flex: 1;
            transition: all 0.2s;
        }
        
        .btn-reset:hover {
            background-color: var(--light);
            color: var(--dark);
        }
        
        .demand-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .demand-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        
        .demand-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .demand-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: var(--dark);
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            line-height: 1.3;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .demand-content {
            padding: 1.25rem;
        }
        
        .demand-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .demand-title:hover {
            color: var(--primary);
        }
        
        .demand-description {
            color: var(--dark);
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .demand-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .demand-actions {
            display: flex;
            gap: 1rem;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--light-gray);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        .images-container {
            margin-bottom: 1rem;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            text-decoration: none;
        }
        
        .tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .sort-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .sort-options {
            display: flex;
            gap: 1rem;
        }
        
        .sort-option {
            color: var(--gray);
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .sort-option.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        .result-count {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background: none;
            border: 1px solid var(--light-gray);
            border-radius: 4px;
            padding: 0.35rem 0.75rem;
            color: var(--gray);
            cursor: pointer;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .clear-filters {
            color: var(--primary);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .applied-filters {
            background-color: var(--primary-light);
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
        }
        
        .applied-filter {
            background-color: white;
            border-radius: 20px;
            padding: 0.25rem 1rem;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .remove-filter {
            color: var(--gray);
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }
        
        .remove-filter:hover {
            color: var(--secondary);
        }
        
        .load-more {
            text-align: center;
            margin: 2rem 0;
        }
        
        .btn-load-more {
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 6px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-load-more:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .no-results {
            text-align: center;
            padding: 3rem 1rem;
            background-color: white;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
        
        .no-results i {
            font-size: 3rem;
            color: var(--light-gray);
            margin-bottom: 1rem;
        }
        
        .no-results h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }
        
        .no-results p {
            color: var(--gray);
            max-width: 500px;
            margin: 0 auto;
        }
        
        @media (max-width: 992px) {
            .filter-sidebar {
                margin-bottom: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .filter-toggle {
                display: flex;
            }
            
            .filter-section {
                display: none;
            }
            
            .filter-section.active {
                display: block;
            }
            
            .search-container {
                order: 3;
                margin-top: 1rem;
                width: 100%;
                max-width: none;
            }
            
            .navbar-nav {
                margin-top: 1rem;
            }
            
            .sort-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .price-range, .date-range {
                flex-direction: column;
                gap: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-handshake"></i>
                SocialHub
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="search-container mx-3">
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-right-0">
                        <i class="fas fa-search text-gray-400"></i>
                    </span>
                    <input type="text" class="form-control border-left-0" placeholder="搜索需求、服务或关键词...">
                </div>
            </div>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center gap-3">
                    <li class="nav-item">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> 发布需求
                        </button>
                    </li>
                    <li class="nav-item">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 38px; height: 38px; object-fit: cover;">
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <h1 class="section-title">需求列表</h1>
        
        <!-- 移动端筛选器切换按钮 -->
        <button class="filter-toggle" id="mobileFilterToggle">
            <span><i class="fas fa-filter me-2"></i> 筛选条件</span>
            <i class="fas fa-chevron-down"></i>
        </button>
        
        <div class="row">
            <!-- 左侧筛选区 -->
            <div class="col-lg-3 filter-sidebar">
                <div class="filter-section" id="filterSection">
                    <div class="filter-title">
                        <i class="fas fa-sliders-h"></i> 筛选条件
                    </div>
                    
                    <!-- 需求分类筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">需求分类</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="category" data-value="all">全部</div>
                            <div class="filter-option" data-filter="category" data-value="service">生活服务</div>
                            <div class="filter-option" data-filter="category" data-value="tech">数码科技</div>
                            <div class="filter-option" data-filter="category" data-value="education">教育培训</div>
                            <div class="filter-option" data-filter="category" data-value="health">运动健康</div>
                            <div class="filter-option" data-filter="category" data-value="art">艺术文化</div>
                            <div class="filter-option" data-filter="category" data-value="other">其他</div>
                        </div>
                    </div>
                    
                    <!-- 价格范围筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">预算范围</div>
                        <div class="price-range">
                            <input type="number" class="price-input" id="minPrice" placeholder="最低" min="0">
                            <span>-</span>
                            <input type="number" class="price-input" id="maxPrice" placeholder="最高" min="0">
                        </div>
                        <input type="range" class="range-slider" id="priceSlider" min="0" max="10000" step="100" value="5000">
                        <div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--gray);">
                            <span>¥0</span>
                            <span id="priceSliderValue">¥5000</span>
                            <span>¥10000+</span>
                        </div>
                    </div>
                    
                    <!-- 发布时间筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">发布时间</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="time" data-value="all">全部时间</div>
                            <div class="filter-option" data-filter="time" data-value="today">今天</div>
                            <div class="filter-option" data-filter="time" data-value="week">本周</div>
                            <div class="filter-option" data-filter="time" data-value="month">本月</div>
                            <div class="filter-option" data-filter="time" data-value="custom">自定义</div>
                        </div>
                        
                        <div class="date-range" style="display: none;" id="customDateRange">
                            <input type="date" class="date-input" id="startDate">
                            <input type="date" class="date-input" id="endDate">
                        </div>
                    </div>
                    
                    <!-- 距离范围筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">距离范围</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="distance" data-value="all">不限</div>
                            <div class="filter-option" data-filter="distance" data-value="1">1公里内</div>
                            <div class="filter-option" data-filter="distance" data-value="5">5公里内</div>
                            <div class="filter-option" data-filter="distance" data-value="10">10公里内</div>
                            <div class="filter-option" data-filter="distance" data-value="30">30公里内</div>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--gray); margin-top: 0.5rem;">
                            <i class="fas fa-map-marker-alt me-1"></i> 定位至：北京市朝阳区
                            <a href="#" style="color: var(--primary); margin-left: 0.5rem;">修改</a>
                        </div>
                    </div>
                    
                    <!-- 需求状态筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">需求状态</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="status" data-value="all">全部状态</div>
                            <div class="filter-option" data-filter="status" data-value="active">正在招募</div>
                            <div class="filter-option" data-filter="status" data-value="pending">已找到合适人选</div>
                            <div class="filter-option" data-filter="status" data-value="completed">已完成</div>
                        </div>
                    </div>
                    
                    <!-- 筛选操作按钮 -->
                    <div class="filter-actions">
                        <button class="btn-filter" id="applyFilters">
                            <i class="fas fa-check me-1"></i> 应用筛选
                        </button>
                        <button class="btn-reset" id="resetFilters">
                            <i class="fas fa-sync-alt me-1"></i> 重置
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="col-lg-9">
                <!-- 已应用的筛选条件 -->
                <div class="applied-filters" id="appliedFilters">
                    <div style="font-weight: 500; color: var(--primary-dark);">已应用筛选：</div>
                    <!-- 动态添加已选择的筛选条件 -->
                    <div class="applied-filter">
                        <span>需求分类：全部</span>
                        <span class="remove-filter" data-filter="category" data-value="all"><i class="fas fa-times"></i></span>
                    </div>
                    <div class="applied-filter">
                        <span>发布时间：全部时间</span>
                        <span class="remove-filter" data-filter="time" data-value="all"><i class="fas fa-times"></i></span>
                    </div>
                    <div class="applied-filter">
                        <span>距离范围：不限</span>
                        <span class="remove-filter" data-filter="distance" data-value="all"><i class="fas fa-times"></i></span>
                    </div>
                    <button class="clear-filters" id="clearAllFilters">
                        <i class="fas fa-trash-alt me-1"></i> 清除全部
                    </button>
                </div>
                
                <!-- 排序和视图选项 -->
                <div class="sort-bar">
                    <div class="result-count" id="resultCount">找到 24 个相关需求</div>
                    
                    <div class="sort-options">
                        <div class="sort-option active" data-sort="newest">
                            <i class="fas fa-clock"></i> 最新发布
                        </div>
                        <div class="sort-option" data-sort="popular">
                            <i class="fas fa-fire"></i> 热门优先
                        </div>
                        <div class="sort-option" data-sort="price-low">
                            <i class="fas fa-sort-amount-down"></i> 价格从低到高
                        </div>
                        <div class="sort-option" data-sort="price-high">
                            <i class="fas fa-sort-amount-up"></i> 价格从高到低
                        </div>
                    </div>
                    
                    <div class="view-options">
                        <button class="view-btn active" data-view="grid"><i class="fas fa-th"></i></button>
                        <button class="view-btn" data-view="list"><i class="fas fa-list"></i></button>
                    </div>
                </div>
                
                <!-- 需求列表 -->
                <div class="demands-container grid-layout" id="demandsContainer">
                    <!-- 需求1 -->
                    <div class="demand-card" data-category="service" data-time="today" data-distance="5" data-price="800" data-status="active">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">摄影爱好者</div>
                                    <div class="post-time">2小时前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">寻找专业摄影师拍摄产品宣传照</a>
                            
                            <div class="images-container">
                                <img src="https://picsum.photos/600/400?random=20" alt="产品示例图" class="single-image">
                            </div>
                            
                            <div class="demand-description">
                                我们是一家初创电商公司，需要为新上市的护肤品拍摄一组宣传照。要求摄影师有相关经验，能拍出产品的质感和细节。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">摄影</a>
                                <a href="#" class="tag">产品拍摄</a>
                                <a href="#" class="tag">商业摄影</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>245 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>18 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>3.2公里</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <span>预算 ¥800</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>32</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 需求2 -->
                    <div class="demand-card" data-category="service" data-time="week" data-distance="10" data-price="3000" data-status="active">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">居家达人</div>
                                    <div class="post-time">3天前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">求推荐靠谱的室内设计师，附户型图</a>
                            
                            <div class="images-container">
                                <img src="https://picsum.photos/600/400?random=21" alt="户型图" class="single-image">
                            </div>
                            
                            <div class="demand-description">
                                刚买的新房准备装修，面积89平米，两室一厅。希望找一位有经验的室内设计师，偏爱北欧和日式简约风格。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">室内设计</a>
                                <a href="#" class="tag">装修</a>
                                <a href="#" class="tag">北欧风格</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>512 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>47 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>7.5公里</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <span>预算 ¥3000</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>89</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 需求3 -->
                    <div class="demand-card" data-category="education" data-time="month" data-distance="1" data-price="250" data-status="pending">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=12" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">音乐学习者</div>
                                    <div class="post-time">2周前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">寻找钢琴老师，成人零基础入门</a>
                            
                            <div class="demand-description">
                                本人28岁，完全没有音乐基础，但一直很想学钢琴。希望找一位有耐心的钢琴老师，最好有教成人入门的经验。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">钢琴教学</a>
                                <a href="#" class="tag">音乐培训</a>
                                <a href="#" class="tag">成人教育</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>328 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>23 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>0.8公里</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <span>预算 ¥250/课时</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>45</span>
                            </button>
                            <button class="action-btn save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 需求4 -->
                    <div class="demand-card" data-category="service" data-time="today" data-distance="30" data-price="1500" data-status="active">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=13" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">宠物主人</div>
                                    <div class="post-time">5小时前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">7月出差，寻找可靠的宠物看护照顾我的金毛</a>
                            
                            <div class="images-container">
                                <img src="https://picsum.photos/600/400?random=25" alt="金毛犬" class="single-image">
                            </div>
                            
                            <div class="demand-description">
                                本人7月10日至7月25日需要出差，家中有一只2岁的金毛需要照顾。希望找一位有养大型犬经验的朋友帮忙照看。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">宠物看护</a>
                                <a href="#" class="tag">金毛</a>
                                <a href="#" class="tag">短期照顾</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>187 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>12 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>28.3公里</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <span>预算 ¥1500</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>27</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="load-more">
                    <button class="btn-load-more" id="loadMoreBtn">
                        <i class="fas fa-refresh me-1"></i> 加载更多需求
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选器相关元素
            const mobileFilterToggle = document.getElementById('mobileFilterToggle');
            const filterSection = document.getElementById('filterSection');
            const filterOptions = document.querySelectorAll('.filter-option');
            const priceSlider = document.getElementById('priceSlider');
            const priceSliderValue = document.getElementById('priceSliderValue');
            const customDateRange = document.getElementById('customDateRange');
            const applyFiltersBtn = document.getElementById('applyFilters');
            const resetFiltersBtn = document.getElementById('resetFilters');
            const appliedFiltersContainer = document.getElementById('appliedFilters');
            const clearAllFiltersBtn = document.getElementById('clearAllFilters');
            const resultCount = document.getElementById('resultCount');
            const demandsContainer = document.getElementById('demandsContainer');
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            const sortOptions = document.querySelectorAll('.sort-option');
            const viewOptions = document.querySelectorAll('.view-btn');
            
            // 移动端筛选器切换
            mobileFilterToggle.addEventListener('click', function() {
                filterSection.classList.toggle('active');
                const icon = this.querySelector('.fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            });
            
            // 价格滑块交互
            priceSlider.addEventListener('input', function() {
                priceSliderValue.textContent = `¥${this.value}`;
            });
            
            // 自定义日期范围显示/隐藏
            filterOptions.forEach(option => {
                if (option.dataset.filter === 'time' && option.dataset.value === 'custom') {
                    option.addEventListener('click', function() {
                        customDateRange.style.display = this.classList.contains('active') ? 'flex' : 'none';
                    });
                }
            });
            
            // 筛选选项点击事件
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const filterType = this.dataset.filter;
                    
                    // 清除同类型其他选项的active状态
                    filterOptions.forEach(opt => {
                        if (opt.dataset.filter === filterType) {
                            opt.classList.remove('active');
                        }
                    });
                    
                    // 设置当前选项为active
                    this.classList.add('active');
                    
                    // 特殊处理自定义日期选项
                    if (filterType === 'time' && this.dataset.value === 'custom') {
                        customDateRange.style.display = 'flex';
                    } else if (filterType === 'time') {
                        customDateRange.style.display = 'none';
                    }
                });
            });
            
            // 应用筛选
            applyFiltersBtn.addEventListener('click', function() {
                // 收集所有筛选条件
                const filters = {};
                
                filterOptions.forEach(option => {
                    if (option.classList.contains('active')) {
                        const filterType = option.dataset.filter;
                        const filterValue = option.dataset.value;
                        filters[filterType] = filterValue;
                    }
                });
                
                // 添加价格范围筛选
                const minPrice = document.getElementById('minPrice').value;
                const maxPrice = document.getElementById('maxPrice').value;
                if (minPrice) filters.minPrice = minPrice;
                if (maxPrice) filters.maxPrice = maxPrice;
                
                // 添加自定义日期筛选（如果启用）
                if (filters.time === 'custom') {
                    const startDate = document.getElementById('startDate').value;
                    const endDate = document.getElementById('endDate').value;
                    if (startDate) filters.startDate = startDate;
                    if (endDate) filters.endDate = endDate;
                }
                
                // 应用筛选并更新已选筛选条件显示
                updateAppliedFilters(filters);
                filterDemands(filters);
                
                // 在移动视图下收起筛选面板
                if (window.innerWidth < 768) {
                    filterSection.classList.remove('active');
                    const icon = mobileFilterToggle.querySelector('.fa-chevron-down');
                    icon.classList.remove('fa-chevron-up');
                }
            });
            
            // 重置筛选条件
            resetFiltersBtn.addEventListener('click', function() {
                // 重置所有筛选选项
                filterOptions.forEach(option => {
                    const filterType = option.dataset.filter;
                    // 只激活"全部"选项
                    if (filterType && option.dataset.value === 'all') {
                        option.classList.add('active');
                    } else {
                        option.classList.remove('active');
                    }
                });
                
                // 重置价格输入
                document.getElementById('minPrice').value = '';
                document.getElementById('maxPrice').value = '';
                priceSlider.value = 5000;
                priceSliderValue.textContent = '¥5000';
                
                // 隐藏自定义日期范围
                customDateRange.style.display = 'none';
                
                // 清除日期输入
                document.getElementById('startDate').value = '';
                document.getElementById('endDate').value = '';
                
                // 应用默认筛选
                const defaultFilters = {
                    category: 'all',
                    time: 'all',
                    distance: 'all',
                    status: 'all'
                };
                
                updateAppliedFilters(defaultFilters);
                filterDemands(defaultFilters);
            });
            
            // 清除单个筛选条件
            appliedFiltersContainer.addEventListener('click', function(e) {
                if (e.target.closest('.remove-filter')) {
                    const removeBtn = e.target.closest('.remove-filter');
                    const filterType = removeBtn.dataset.filter;
                    const filterValue = removeBtn.dataset.value;
                    
                    // 重置对应类型的筛选选项为"全部"
                    filterOptions.forEach(option => {
                        if (option.dataset.filter === filterType && option.dataset.value === 'all') {
                            option.classList.add('active');
                        } else if (option.dataset.filter === filterType) {
                            option.classList.remove('active');
                        }
                    });
                    
                    // 特殊处理
                    if (filterType === 'time') {
                        customDateRange.style.display = 'none';
                    }
                    
                    // 重新应用筛选
                    applyFiltersBtn.click();
                }
            });
            
            // 清除所有筛选条件
            clearAllFiltersBtn.addEventListener('click', function() {
                resetFiltersBtn.click();
            });
            
            // 更新已应用的筛选条件显示
            function updateAppliedFilters(filters) {
                // 清空现有内容，保留标题和清除全部按钮
                const children = Array.from(appliedFiltersContainer.children);
                children.forEach(child => {
                    if (!child.textContent.includes('已应用筛选') && !child.classList.contains('clear-filters')) {
                        child.remove();
                    }
                });
                
                // 添加分类筛选
                if (filters.category) {
                    let categoryText = '全部';
                    if (filters.category === 'service') categoryText = '生活服务';
                    if (filters.category === 'tech') categoryText = '数码科技';
                    if (filters.category === 'education') categoryText = '教育培训';
                    if (filters.category === 'health') categoryText = '运动健康';
                    if (filters.category === 'art') categoryText = '艺术文化';
                    if (filters.category === 'other') categoryText = '其他';
                    
                    addAppliedFilter('category', filters.category, `需求分类：${categoryText}`);
                }
                
                // 添加时间筛选
                if (filters.time) {
                    let timeText = '全部时间';
                    if (filters.time === 'today') timeText = '今天';
                    if (filters.time === 'week') timeText = '本周';
                    if (filters.time === 'month') timeText = '本月';
                    if (filters.time === 'custom') timeText = '自定义日期';
                    
                    addAppliedFilter('time', filters.time, `发布时间：${timeText}`);
                }
                
                // 添加距离筛选
                if (filters.distance) {
                    let distanceText = '不限';
                    if (filters.distance === '1') distanceText = '1公里内';
                    if (filters.distance === '5') distanceText = '5公里内';
                    if (filters.distance === '10') distanceText = '10公里内';
                    if (filters.distance === '30') distanceText = '30公里内';
                    
                    addAppliedFilter('distance', filters.distance, `距离范围：${distanceText}`);
                }
                
                // 添加状态筛选
                if (filters.status) {
                    let statusText = '全部状态';
                    if (filters.status === 'active') statusText = '正在招募';
                    if (filters.status === 'pending') statusText = '已找到合适人选';
                    if (filters.status === 'completed') statusText = '已完成';
                    
                    addAppliedFilter('status', filters.status, `需求状态：${statusText}`);
                }
                
                // 添加价格筛选
                if (filters.minPrice || filters.maxPrice) {
                    let priceText = '';
                    if (filters.minPrice && filters.maxPrice) {
                        priceText = `¥${filters.minPrice} - ¥${filters.maxPrice}`;
                    } else if (filters.minPrice) {
                        priceText = `¥${filters.minPrice} 以上`;
                    } else if (filters.maxPrice) {
                        priceText = `¥${filters.maxPrice} 以下`;
                    }
                    
                    addAppliedFilter('price', `${filters.minPrice || ''}-${filters.maxPrice || ''}`, `预算范围：${priceText}`);
                }
            }
            
            // 添加单个已应用筛选条件
            function addAppliedFilter(filterType, filterValue, displayText) {
                const filterElement = document.createElement('div');
                filterElement.className = 'applied-filter';
                filterElement.innerHTML = `
                    <span>${displayText}</span>
                    <span class="remove-filter" data-filter="${filterType}" data-value="${filterValue}">
                        <i class="fas fa-times"></i>
                    </span>
                `;
                
                // 插入到清除全部按钮之前
                appliedFiltersContainer.insertBefore(filterElement, clearAllFiltersBtn);
            }
            
            // 根据筛选条件过滤需求
            function filterDemands(filters) {
                const demandCards = document.querySelectorAll('.demand-card');
                let visibleCount = 0;
                
                demandCards.forEach(card => {
                    let isVisible = true;
                    
                    // 分类筛选
                    if (filters.category && filters.category !== 'all' && card.dataset.category !== filters.category) {
                        isVisible = false;
                    }
                    
                    // 时间筛选
                    if (isVisible && filters.time && filters.time !== 'all' && card.dataset.time !== filters.time) {
                        isVisible = false;
                    }
                    
                    // 距离筛选
                    if (isVisible && filters.distance && filters.distance !== 'all') {
                        const cardDistance = parseFloat(card.dataset.distance);
                        const filterDistance = parseFloat(filters.distance);
                        if (cardDistance > filterDistance) {
                            isVisible = false;
                        }
                    }
                    
                    // 状态筛选
                    if (isVisible && filters.status && filters.status !== 'all' && card.dataset.status !== filters.status) {
                        isVisible = false;
                    }
                    
                    // 价格筛选
                    if (isVisible && (filters.minPrice || filters.maxPrice)) {
                        const cardPrice = parseFloat(card.dataset.price);
                        
                        if (filters.minPrice && cardPrice < parseFloat(filters.minPrice)) {
                            isVisible = false;
                        }
                        
                        if (isVisible && filters.maxPrice && cardPrice > parseFloat(filters.maxPrice)) {
                            isVisible = false;
                        }
                    }
                    
                    // 显示或隐藏卡片
                    card.style.display = isVisible ? 'block' : 'none';
                    if (isVisible) visibleCount++;
                });
                
                // 更新结果计数
                resultCount.textContent = `找到 ${visibleCount} 个相关需求`;
                
                // 检查是否有结果
                checkNoResults(visibleCount);
            }
            
            // 检查是否没有结果
            function checkNoResults(count) {
                // 检查是否已存在无结果提示
                let noResultsElement = document.querySelector('.no-results');
                
                if (count === 0) {
                    // 如果没有结果且没有提示，则创建提示
                    if (!noResultsElement) {
                        noResultsElement = document.createElement('div');
                        noResultsElement.className = 'no-results';
                        noResultsElement.innerHTML = `
                            <i class="fas fa-search"></i>
                            <h3>未找到匹配的需求</h3>
                            <p>尝试调整筛选条件或搜索关键词，以查看更多结果。</p>
                        `;
                        demandsContainer.parentNode.insertBefore(noResultsElement, demandsContainer);
                    }
                    // 隐藏需求容器和加载更多按钮
                    demandsContainer.style.display = 'none';
                    loadMoreBtn.style.display = 'none';
                } else {
                    // 如果有结果且存在提示，则移除提示
                    if (noResultsElement) {
                        noResultsElement.remove();
                    }
                    // 显示需求容器和加载更多按钮
                    demandsContainer.style.display = 'grid';
                    loadMoreBtn.style.display = 'inline-block';
                }
            }
            
            // 排序功能
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 更新按钮状态
                    sortOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取排序类型
                    const sortType = this.dataset.sort;
                    
                    // 排序需求卡片
                    sortDemands(sortType);
                });
            });
            
            // 排序需求
            function sortDemands(sortType) {
                const demandCards = Array.from(document.querySelectorAll('.demand-card'));
                const visibleCards = demandCards.filter(card => card.style.display !== 'none');
                
                // 根据不同类型排序
                switch(sortType) {
                    case 'newest':
                        // 按最新发布排序（已按时间戳排序，这里直接反转）
                        visibleCards.sort((a, b) => {
                            const timeA = getTimeValue(a.dataset.time);
                            const timeB = getTimeValue(b.dataset.time);
                            return timeB - timeA;
                        });
                        break;
                        
                    case 'popular':
                        // 按热门度（点赞数）排序
                        visibleCards.sort((a, b) => {
                            const likesA = parseInt(a.querySelector('.like-btn span').textContent);
                            const likesB = parseInt(b.querySelector('.like-btn span').textContent);
                            return likesB - likesA;
                        });
                        break;
                        
                    case 'price-low':
                        // 按价格从低到高排序
                        visibleCards.sort((a, b) => {
                            const priceA = parseFloat(a.dataset.price);
                            const priceB = parseFloat(b.dataset.price);
                            return priceA - priceB;
                        });
                        break;
                        
                    case 'price-high':
                        // 按价格从高到低排序
                        visibleCards.sort((a, b) => {
                            const priceA = parseFloat(a.dataset.price);
                            const priceB = parseFloat(b.dataset.price);
                            return priceB - priceA;
                        });
                        break;
                }
                
                // 重新排列DOM中的卡片
                visibleCards.forEach(card => {
                    demandsContainer.appendChild(card);
                });
            }
            
            // 将时间文本转换为数值以便排序
            function getTimeValue(timeStr) {
                switch(timeStr) {
                    case 'today': return 3;
                    case 'week': return 2;
                    case 'month': return 1;
                    default: return 0;
                }
            }
            
            // 视图切换功能
            viewOptions.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    viewOptions.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取目标视图类型
                    const viewType = this.getAttribute('data-view');
                    
                    // 移除所有视图类
                    demandsContainer.classList.remove('grid-layout', 'list-layout');
                    
                    // 添加目标视图类
                    demandsContainer.classList.add(`${viewType}-layout`);
                });
            });
            
            // 加载更多功能
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> 加载中...';
                
                // 模拟加载延迟
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-refresh me-1"></i> 加载更多需求';
                    // 实际应用中这里会加载并添加更多需求内容
                }, 1500);
            });
            
            // 点赞功能
            document.querySelectorAll('.like-btn').forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const count = this.querySelector('span');
                    let currentCount = parseInt(count.textContent);
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        count.textContent = currentCount + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        count.textContent = currentCount - 1;
                    }
                });
            });
            
            // 收藏功能
            document.querySelectorAll('.save-btn').forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    const text = this.querySelector('span');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        text.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        text.textContent = '收藏';
                    }
                });
            });
            
            // 评论功能
            document.querySelectorAll('.comment-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const demandTitle = this.closest('.demand-card').querySelector('.demand-title').textContent;
                    alert(`查看 "${demandTitle}" 的评论区`);
                });
            });
        });
    </script>
</body>
</html>
    
